<template>
    <div class="clockbox">
        <span>{{ hh }}</span>
        <span style="width: 10px;">:</span>
        <span>{{ mm }}</span>
        <span style="width: 10px;">:</span>
        <span>{{ ss }}</span>
    </div>
</template>


<script setup>
import { watch, onMounted, ref } from 'vue'

// props传值
const props = defineProps({
    setTime: Number,
    eid: {
        default: '0',
        required: false,
        type: String
    }
})

// 父组件回调函数
const emits = defineEmits(['timeOver'])

// 定义定时器
let timer

// 时、分、秒
let hh = ref('00')
let mm = ref('00')
let ss = ref('00')

// 监测父组件时限传值
watch(() => props.setTime, (newval, oldval) => {

    let startTime = localStorage.getItem(`start${props.eid}`)

    // 如果没有缓存时间 读取最新值
    if (!startTime) {
        localStorage.setItem(`start${props.eid}`, newval)
    }
    // 直接利用缓存时间进行倒计时
    startCountdown()
})


onMounted(() => {

})

// 获取传入参数时间 格式：时间戳
function startCountdown() {

    // 获取防刷新本地缓存时间 格式：时间戳
    let startTime = localStorage.getItem(`start${props.eid}`)
    // console.log(startTime);

    timer = setInterval(() => { countDown(startTime) }, 1000)
}
function countDown(time) {
    var nowTime = +new Date(); // 返回的是当前时间总的毫秒数

    // var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
    var times = (time - nowTime) / 1000; // times是剩余时间总的秒数 
    if (times <= 0) {
        // 时间到 清空本地缓存时间、定时器、调用回调函数通知父组件
        localStorage.removeItem(`start${props.eid}`)
        clearInterval(timer)
        emits('timeOver')
        return
    }
    var d = parseInt(times / 60 / 60 / 24); // 天
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24); //时
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60); // 分
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60); // 当前的秒
    s = s < 10 ? '0' + s : s;
    // return d + '天' + h + '时' + m + '分' + s + '秒';

    hh.value = h
    mm.value = m
    ss.value = s
    return { d, h, m, s };
}


</script>


<style scoped>
.clockbox {
    box-sizing: border-box;
    display: flex;
    width: 120px;
    height: 30px;
    justify-content: space-between;
    align-items: center;
}

.clockbox span {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
</style>